<template>
    <div class="balance">
        <mu-paper class="demo-paper" :zDepth="2">
            <div class="bx-id">您的包厢号是：{{bxId}}</div>
            <mu-divider />
            <ul>
                <li v-for="item in theSelectFoods" class="select-food-item">
                    {{item.name}}:{{item.price}}元*{{item.count}}个
                    <mu-divider />
                </li>
            </ul>
            <div class="select-food-end">总数：{{totalCount}}个,总价：{{totalPrice}}元</div>
            <mu-divider />
        </mu-paper>
    </div>
</template>

<script type="text/ecmascript-6">
  import { mapState } from 'vuex'
  export default {
    data: function () {
      return {}
    },
    computed: mapState({
      theSelectFoods: state => state.selectfoods,
      bxId: state => state.bxid,
      totalPrice: state => state.totalprice,
      totalCount: state => state.totalcount
    })
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/components/balance.styl"
    @import "../mixin.styl"
    .bx-id, .select-food-item, .select-food-end
        width 100%
        height 40
        line-height 40px
        text-align left
    .select-food-item
        text-align right
    .select-food-end
        text-align right
</style>
